<template>
	<el-divider>主题风格</el-divider>
	<div class="theme-scheme">
		<div :class="['theme-scheme-icon sun', { dark: isDark }]" @click="toggleDarkTheme">
			<el-icon class="icon" size="20"><Sunny /></el-icon>
		</div>
		<div :class="['theme-scheme-icon moon', { dark: isDark }]" @click="toggleDarkTheme">
			<el-icon class="icon" size="20"><MoonNight /></el-icon>
		</div>
	</div>
</template>

<script setup>
import { computed } from "vue"
import { useSettingStore } from "/store/setting"
const settingStore = useSettingStore()

const isDark = computed(() => settingStore.dark)

function toggleDarkTheme() {
	settingStore.dark = !settingStore.dark
}
</script>

<style lang="scss" scoped>
.theme-scheme {
	position: relative;
	height: 40px;
	.theme-scheme-icon {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		background: var(--content-background);
		box-shadow: 0 0 0 5px var(--el-fill-color-darker);
		backface-visibility: hidden;
		transition: var(--transition);
		&.sun {
			&.dark {
				transform: rotateY(180deg);
			}
		}
		&.moon {
			transform: rotateY(180deg);
			&.dark {
				transform: rotateY(360deg);
			}
		}
	}
}
</style>
